<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta
            name="description"
            content="专业舒尔特方格注意力训练游戏，10个渐进式关卡提升专注力，支持进度保存和星级评价系统"
        />
        <meta name="keywords" content="舒尔特方格,注意力训练,专注力游戏,认知训练,脑力开发" />
        <meta property="og:title" content="舒尔特方格注意力训练游戏" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="./og-image.png" />
        <title>舒尔特方格</title>
        <!-- Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'GA_MEASUREMENT_ID');
        </script>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <div class="control-sidebar">
                <h1>舒尔特方格</h1>

                <div class="game-info">
                    <div class="current-number">
                        <span>当前数字:</span>
                        <span id="current-number">1</span>
                    </div>

                    <div class="timer" id="timer-container">
                        <span>时间:</span>
                        <span id="timer">0</span>
                        <span>秒</span>
                    </div>

                    <div class="level-info">
                        <span>关卡: </span><span id="current-level-display">1</span>
                        <button id="view-level-details" class="info-btn" title="查看关卡详情">ℹ️</button>
                    </div>
                </div>

                <div id="time-limit-bar-container">
                    <div id="time-limit-bar"></div>
                </div>

                <div class="controls">
                    <div class="level-selector">
                        <label>选择关卡:</label>
                        <select id="level-select">
                            <option value="1">关卡 1 - 初学者</option>
                            <option value="2">关卡 2 - 简单</option>
                            <option value="3">关卡 3 - 常规</option>
                            <option value="4">关卡 4 - 计时挑战</option>
                            <option value="5">关卡 5 - 进阶</option>
                            <option value="6">关卡 6 - 颜色干扰</option>
                            <option value="7">关卡 7 - 高级</option>
                            <option value="8">关卡 8 - 移动挑战</option>
                            <option value="9">关卡 9 - 专家</option>
                            <option value="10">关卡 10 - 大师级</option>
                        </select>
                    </div>

                    <button id="start-btn">开始游戏</button>
                </div>
            </div>

            <div class="game-area">
                <div id="grid-container" class="grid-container"></div>
            </div>
        </div>

        <div id="modal-overlay" class="modal-overlay">
            <div class="result-modal">
                <h2 id="modal-title">恭喜完成!</h2>
                <p>你的时间: <span id="modal-time">0</span> 秒</p>

                <div id="modal-stars" class="stars-container"></div>

                <div id="modal-level-message">
                    <p>你已通关! <span id="modal-level-status"></span></p>
                </div>

                <div class="result-buttons">
                    <button id="modal-restart-btn">重新挑战</button>
                    <button id="modal-next-btn" class="pulse-animation">下一关卡 →</button>
                </div>
            </div>
        </div>

        <div id="level-detail-overlay" class="modal-overlay">
            <div class="level-detail-modal">
                <div class="level-detail-content" id="level-detail">
                    <!-- 关卡内容会通过JavaScript动态填充 -->
                </div>
                <button id="close-level-detail" class="close-btn">关闭</button>
            </div>
        </div>

        <script src="script.js"></script>
    </body>
</html>
